import React, { useState, useEffect } from 'react'
import { Link, Switch, Route, Redirect } from 'react-router-dom'
import { Layout, Menu, Breadcrumb, Input, Collapse, Button } from 'antd';
import { UserOutlined, LaptopOutlined, PlusOutlined, CalendarOutlined, ScheduleOutlined, InboxOutlined, CarryOutOutlined, RestOutlined } from '@ant-design/icons';
import { connect, useDispatch, useSelector } from "react-redux"
import './task.css'

import RecentDay from './recentDay/RecentDay'
import Today from './today/Today'
import MyEventListener from '../../utils/bus'
const { SubMenu } = Menu;
const { Sider } = Layout;
const res = '123444'
const { Panel } = Collapse;
export default function Index() {
    const dispatch = useDispatch()
    const [collapsed, setcollapsed] = useState(false)
    const toggle = (data) => {
        console.log('触发');
        // console.log(collapsed);
        setcollapsed(data);
        // console.log(collapsed);
    };

    //挂载
    useEffect(() => {
        console.log(collapsed);
        //添加事假总线监听函数
        MyEventListener.addListener("toggle", toggle)
    }, [])

    //更新
    useEffect(() => {
        // MyEventListener.removeListener("toggle", toggle)
        console.log("update");
    }, [collapsed])
    //销毁
    useEffect(() => {
        // 清除函数
        return () => {
            MyEventListener.removeListener("toggle", toggle)
            console.log("componentWillUnMount");
        }
    }, [])

//分类清单
const typeClearList = (e) =>{
    e.stopPropagation()
    alert('分类清单')
}


//添加清单
const addClearList = (e) =>{
    e.stopPropagation()
    alert('测试')
}

//过滤清单
const filterList = (e)=>{
    e.stopPropagation()
    alert('过滤')
}
    return (
        <div>
            <Layout style={{ height: '100vh' }}>
                <Layout>
                    <Sider theme='light' trigger={null} collapsible collapsed={collapsed} width={200} className="site-layout-background" style={{ paddingTop: '10px', borderRight: 'rgb(243,243,243)' }}>
                        <Menu
                            mode="inline"
                            defaultSelectedKeys={['1']}
                            defaultOpenKeys={['sub1']}
                            style={{ height: '100%', borderRight: 0 }}
                        >
                            <Menu.Item key="1" icon={<CalendarOutlined />} style={{ borderRight: 'none' }}><Link to='/task/today'>今天</Link></Menu.Item>
                            <Menu.Item key="2" icon={<ScheduleOutlined />}><Link to='/task/recentday'>最近7天</Link></Menu.Item>
                            <Menu.Item key="3" icon={<InboxOutlined></InboxOutlined>}>收集箱</Menu.Item>
                            <Collapse  bordered={false} ghost={true} >
                                <Panel header="清单" key="4" extra={<PlusOutlined onClick={(e)=>typeClearList(e)}></PlusOutlined>}>
                                    <div className='content2'>
                                        用清单来分类收集，
                                        组织和管理你的任务和笔记
                                   </div>
                                </Panel>
                            </Collapse>

                            <Collapse  bordered={false} ghost={true}>
                                <Panel header="标签" key="5" extra={<PlusOutlined onClick={(e)=>addClearList(e)}></PlusOutlined>}>
                                    <div className='content2'>
                                    以标签的维度展示不同清单的任务。再添加任务时输入"#"
                                        可快速选择标签
                                   </div>
                                </Panel>
                            </Collapse>

                            <Collapse  bordered={false} ghost={true} >
                                <Panel header="过滤器" key="6" extra={<PlusOutlined onClick={(e)=>filterList(e)}></PlusOutlined>}>
                                    <div className='content2'>
                                    根据清单、时间、优先级、标签等过滤出特定的任务
                                   </div>
                                </Panel>
                            </Collapse>

                            <Menu.Item key="8" icon={<CarryOutOutlined />}>已完成</Menu.Item>
                            <Menu.Item key="9" icon={<RestOutlined />}>垃圾箱</Menu.Item>
                        </Menu>
                    </Sider>
                    <Layout className="site-layout" style={{ backgroundColor: 'white' }}>
                        {/* <Button onClick={toggle}>按钮</Button> */}
                        <Switch>
                            <Redirect exact from='/task' to='/task/today'></Redirect>
                            <Route path='/task/today' component={Today}></Route>
                            <Route path='/task/recentday' component={RecentDay}></Route>
                        </Switch>
                    </Layout>
                </Layout>

            </Layout>

        </div>
    )
}
